import styles from './index.module.less';
import { map, find } from 'lodash';
import cs from 'classnames';
import { useRequest } from "ahooks";
import { getTodayAlertList } from "@/api/modules/report";
import dayjs from 'dayjs';

export default () => {
    const { data: staData } = useRequest(() => getTodayAlertList({}));
    const data = staData?.data
    const typeList = staData?.data?.alertTypeCounts
    return (
        <div className={styles.messageContainer}>
            <div className={styles.header}>
                <div className={styles.title}>预警消息</div>
                <div className={styles.btnMore}>更多</div>
            </div>
            <div className={styles.messageList}>
                {
                    map(data?.recentAlerts || [], (item: any, index: number) => {
                        return (
                            <div className={styles.messageItem} key={index}>
                                <div className={styles.up}>
                                    <div className={styles.mTitle}>
                                        <div className={cs(styles.icon, item.type === 2 && styles.error, item.type === 3 && styles.warning)}></div>
                                        <div className={styles.name}>{find(typeList, (t:any) => t.type === item.type)?.typeDesc}</div>
                                    </div>
                                    <div className={styles.time}>{dayjs(item.createTime).format('MM-DD HH:mm')}</div>
                                </div>
                                <div className={styles.content}>
                                    {item.remark}
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}